document.addEventListener('DOMContentLoaded', function() {
    fetchStudents();
    document.getElementById('addStudentForm').addEventListener('submit', addStudent);
  });
  
  function fetchStudents() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:3000/students', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        var students = JSON.parse(xhr.responseText);
        var tableBody = document.getElementById('studentsTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = ''; // 清空现有数据
        students.forEach(function(student) {
          var row = tableBody.insertRow();
          row.insertCell(0).textContent = student.id;
          row.insertCell(1).textContent = student.name;
          row.insertCell(2).textContent = student.age;
          row.insertCell(3).textContent = student.major;
          row.insertCell(4).textContent = student.grade;
          var actionCell = row.insertCell(5);
          var editButton = document.createElement('button');
          editButton.textContent = '修改';
          editButton.className = 'edit';
          editButton.setAttribute('data-id', student.id);
          editButton.onclick = function() { showEditForm(student.id, student); };
          actionCell.appendChild(editButton);
          var deleteButton = document.createElement('button');
          deleteButton.textContent = '删除';
          deleteButton.className = 'delete';
          deleteButton.setAttribute('data-id', student.id);
          deleteButton.onclick = function() { deleteStudent(student.id); };
          actionCell.appendChild(deleteButton);
        });
      } else {
        console.error('Error fetching students data:', xhr.status);
      }
    };
    xhr.onerror = function() {
      console.error('Request failed.');
    };
    xhr.send();
  }
  
  function addStudent(e) {
    e.preventDefault();
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:3000/students', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
      if (xhr.status === 201) {
        fetchStudents(); // 重新加载学生数据
      } else {
        console.error('Error adding student:', xhr.status);
      }
    };
    xhr.onerror = function() {
      console.error('Request failed.');
    };
    var studentData = {
      id: document.getElementById('addId').value,
      name: document.getElementById('name').value,
      age: document.getElementById('age').value,
      major: document.getElementById('major').value,
      grade: document.getElementById('grade').value
    };
    xhr.send(JSON.stringify(studentData));
    document.getElementById('addStudentForm').reset(); // 清空表单
  }
  
  function showEditForm(id, student) {
    document.getElementById('editId').value = id;
    document.getElementById('editName').value = student.name;
    document.getElementById('editAge').value = student.age;
    document.getElementById('editMajor').value = student.major;
    document.getElementById('editGrade').value = student.grade;
    document.getElementById('editStudentForm').style.display = 'block';
    document.getElementById('addStudentForm').style.display = 'none'; // 隐藏添加表单
  }
  
  function editStudent(e) {
    e.preventDefault();
    var xhr = new XMLHttpRequest();
    xhr.open('PUT', `http://localhost:3000/students/${document.getElementById('editId').value}`, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
      if (xhr.status === 200) {
        fetchStudents(); // 重新加载学生数据
        document.getElementById('editStudentForm').style.display = 'none'; // 隐藏修改表单
        document.getElementById('addStudentForm').style.display = 'block'; // 显示添加表单
      } else {
        console.error('Error updating student:', xhr.status);
      }
    };
    xhr.onerror = function() {
      console.error('Request failed.');
    };
    var studentData = {
      id: document.getElementById('editId').value,
      name: document.getElementById('editName').value,
      age: document.getElementById('editAge').value,
      major: document.getElementById('editMajor').value,
      grade: document.getElementById('editGrade').value
    };
    xhr.send(JSON.stringify(studentData));
  }
  
  function deleteStudent(id) {
    var xhr = new XMLHttpRequest();
    xhr.open('DELETE', `http://localhost:3000/students/${id}`, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        fetchStudents(); // 重新加载学生数据
      } else {
        console.error('Error deleting student:', xhr.status);
      }
    };
    xhr.onerror = function() {
      console.error('Request failed.');
    };
    xhr.send();
  }
  
  document.getElementById('editStudentForm').addEventListener('submit', editStudent);